<template>
  <el-dialog
    title="上传打款凭证"
    :visible.sync="visible"
    width="800px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form ref="retainageForm" :model="retainageForm" label-width="80px">
      <el-form-item
        prop="img"
        :rules="{
          required: true,
          message: '请上传付款凭证',
          trigger: 'blur'
        }"
        label="打款凭证"
      >
        <el-upload
          action="/#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="imgRemove"
          :file-list="retainageForm.img"
          multiple
          :http-request="imgUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="orderAddRetainage">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { withdrawGiveMoney } from "@/api/draw-mng";
import { fileUpload } from "@/api/file";
export default {
  props: ["visible", "item"],
  data() {
    return {
      retainageForm: {
        money: null,
        img: []
      },
      dialogVisible: false,
      dialogImageUrl: null
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
      } else {
        this.$refs["retainageForm"].resetFields();
      }
    }
  },
  methods: {
    imgUpload(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then(res => {
        if (res.code === 200) {
          this.retainageForm.img.push({
            name: "",
            url: res.data.file,
            uid: file.file.uid
          });
        }
      });
    },
    imgRemove(file, fileList) {
      this.retainageForm.img.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.retainageForm.img.splice(index, 1);
          return;
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    orderAddRetainage() {
      this.$refs.retainageForm.validate(valid => {
        if (valid) {
          withdrawGiveMoney({
            id: this.item.id,
            img: this.retainageForm.img.map(item => {
              return item.url;
            })
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "打款成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped></style>
